<template style="background-color: #1e1e1e">
  <div class="app" style="background-color: #ffffff">
    <div style="width: 100%;">
      <van-icon
          style="position:fixed;top: 20px;left: 20px;cursor: pointer;border-radius: 50%"
          name="arrow-left" color="blank"
          size="30px" @click="back"/>
      <p style="color: black;font-size: 16px;width: 100%;margin: 20px auto;">汽车预定</p>
    </div>
    <div class="top">
      <van-swipe :autoplay="3000" :height="160" class="swipe-container">
        <van-swipe-item>
          <img style="width: 80%; height: 100%;" :src="cars.imageUrl[0]" />
        </van-swipe-item>
<!--        <van-swipe-item>-->
<!--          <img style="width: 80%; height: 100%;" src="http://sq4f6kqu8.hn-bkt.clouddn.com/rentalcars/DM_20250116151840_001.PNG?e=1737013855&token=rWxRhgEIi6r6WpeIwlvhTEPMnsDCB8KqZ34tVS7A:FoP5tNtjgP1nZxd9C1vjWmsO5LY=" />-->
<!--        </van-swipe-item>-->
<!--        <van-swipe-item>-->
<!--          <img style="width: 80%; height: 100%;" src="http://sq4f6kqu8.hn-bkt.clouddn.com/rentalcars/DM_20250116151840_001.PNG?e=1737013855&token=rWxRhgEIi6r6WpeIwlvhTEPMnsDCB8KqZ34tVS7A:FoP5tNtjgP1nZxd9C1vjWmsO5LY=" />-->
<!--        </van-swipe-item>-->
<!--        <van-swipe-item>-->
<!--          <img style="width: 80%; height: 100%;" src="http://sq4f6kqu8.hn-bkt.clouddn.com/rentalcars/DM_20250116151840_001.PNG?e=1737013855&token=rWxRhgEIi6r6WpeIwlvhTEPMnsDCB8KqZ34tVS7A:FoP5tNtjgP1nZxd9C1vjWmsO5LY=" />-->
<!--        </van-swipe-item>-->
      </van-swipe>
    </div>
    <div style="margin: auto;background-color: #ffffff;width: 90%;border-radius: 20px;">
      <div class="rental-info-container">
        <div class="car-info">
          <h3 align="left">{{ nowCar.carModel }}</h3>
        </div>
        <div class="rental-details">
          <br>
          <div class="item">
            <span class="label">租车人</span>
            <span class="value">{{this.$route.query.nickname}}</span>
          </div>
          <br>
          <div class="item">
            <span class="label">开始时间</span>
            <span class="value">
            <template v-if="orders.startTime">
              {{orders.startTime|format('yyyy-MM-dd')}}
            </template>
            </span>
          </div>
          <br>
          <div class="item">
            <span class="label">结束时间</span>
            <span class="value">
              <template v-if="orders.endTime">
                {{orders.endTime|format('yyyy-MM-dd')}}
              </template>

            </span>
          </div>
          <br>
          <div class="item">
            <span class="label">提车地址</span>
            <span class="value">{{orders.pickupLocation}}</span>
          </div>
          <br>
          <div class="item">
            <span class="label">总花费</span>
            <span class="value">¥
              <template v-if="orders.totalPrice">
                {{orders.totalPrice}}
              </template>
            </span>
          </div>
          <hr>
        </div>
        <button class="carRentalButton1" @click="addOrders">
          确定
        </button>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "RentalDetailsView",
  data() {
    return {
      //订单
      orders:{
      },
      cars:{},

      nowCar:{
        brandId: "",
        carId: "",
        carModel: "",
        fuelLevel: "",
        locationPoint: "",
        numReviews: "",
        pricePerHour: "",
        rating: "",
      },


    }
  },
  filters:{
    format(value,arg){
      function dateFormat(date, format) {
        if (typeof date === "string") {
          var mts = date.match(/(\/Date\((\d+)\)\/)/);
          if (mts && mts.length >= 3) {
            date = parseInt(mts[2]);
          }
        }
        date = new Date(date);
        if (!date || date.toUTCString() == "Invalid Date") {
          return "";
        }
        var map = {
          "M": date.getMonth() + 1, //月份
          "d": date.getDate(), //日
          "h": date.getHours(), //小时
          "m": date.getMinutes(), //分
          "s": date.getSeconds(), //秒
          "q": Math.floor((date.getMonth() + 3) / 3), //季度
          "S": date.getMilliseconds() //毫秒
        };
        format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
          var v = map[t];
          if (v !== undefined) {
            if (all.length > 1) {
              v = '0' + v;
              v = v.substr(v.length - 2);
            }
            return v;
          } else if (t === 'y') {
            return (date.getFullYear() + '').substr(4 - all.length);
          }
          return all;
        });
        return format;
      }

      return dateFormat(value,arg);

    }
  },
  created() {
    //数据回显

    this.cars = JSON.parse(localStorage.getItem("cars"));
    let cars = this.cars
    console.log(cars.carId);
    this.getCarsById(cars.carId);

  },
  methods: {
    //添加订单
    addOrders(){
      this.axios.post("http://localhost:10086/api/order/orders/addOrders",this.orders).then(res=>{
        console.log(res.data.data);
        if (res.data.data.code == 200){
          this.$toast.success('预定成功');
          console.log(res.data.data.data);
          setTimeout(()=>{
            this.$router.push({
              path: "/payment",
              query: {
                orderId: res.data.data.data,
              },
            })
          },666)
        }else{
         this.$toast.fail('预定失败,有订单未完成');
        }
      })
    },

    //查询汽车信息
    getCarsById(carId){
      this.axios.get(`http://localhost:10086/api/cars/cars/getCarsById/`+carId).then(res=>{
        this.nowCar = res.data.data;
        // 获取开始时间和结束时间
        const startTime = new Date(this.$route.query.startTime);
        const endTime = new Date(this.$route.query.endTime);

// 计算时间差（毫秒）
        const timeDiff = endTime - startTime;

// 将时间差转换为小时
        const hoursDiff = timeDiff / (1000 * 60 * 60);

// // 计算总价
//         this.totalPrice = hoursDiff * this.nowCar.pricePerHour;

        this.orders={
          //用户姓名 查询用户id
          userId: this.$route.query.userId,
          //汽车id
          carId: this.nowCar.carId,
          //开始时间
          startTime: this.$route.query.startTime,
          //结束时间
          endTime: this.$route.query.endTime,
          //租借价格  后端查询
          totalPrice: hoursDiff * this.nowCar.pricePerHour,
          //订车地址   后端查询
          pickupLocation: this.nowCar.locationPoint,
        };
      })
    },

    back() {
      this.$router.go(-1)
    },
    showEvaluation() {
      this.$router.push({
        path: "/evaluate",
        query: {
          id: this.order.id,
          name: this.order.name,
          time: this.order.time,
          img: this.order.img,
          price: this.order.price,
        },
      })
    }
  }
}
</script>

<style scoped>
.rental-info-container {
  padding: 20px;
}
.car-info h3 {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
}
.details {
  display: flex;
  margin-top: 10px;
}
.details span {
  display: flex;
  align-items: center;
  margin-right: 20px;
  font-size: 14px;
}
.details i {
  margin-right: 5px;
}
.rental-details {
  margin-top: 20px;
}
.item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.label {
  font-size: 16px;
  font-weight: normal;
}
.value {
  width: 200px;
  text-align: left;
  font-size: 16px;
  font-weight: bold;
}
.evaluation-btn-container {
  text-align: center;
  margin-top: 20px;
}
.evaluation-btn-container button {
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}
.app{
  background-color: #ffffff;
  height: 100%;
}
.top {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px; /* 可根据实际情况调整高度 */
  width: 100%;
  background-color: #ffffff;
  margin-top: 50px; /* 为按钮留出空间，可根据按钮高度调整 */
}
.carRentalButton1{
  width: 85%;
  height: 60px;
  border: none;
  background: #3474ff;
  position: absolute;
  bottom: 20px;
  right: 30px;
}
</style>